<template>
  <div>
    <li :class="theme" class="time-label">
      <el-tag>{{ label }}</el-tag>
    </li>
    <li>
      <div class="timeline-item">
        <span class="time">
          <slot />
        </span>
        <div class="timeline-header">{{ header }}</div>
        <div class="timeline-body" v-html="body" />
      </div>
    </li>
  </div>
</template>

<script>
export default {
  name: 'TimeLineItem',
  props: {
    label: {
      type: String,
      default: ''
    },
    header: {
      type: String,
      default: ''
    },
    body: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'blue'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
